
(function(window, css_path, undefined) {
    'use strict';


    /**
     * get computed style
     * @param  {obj} elem element
     * @param  {str} prop eg: width
     * @return {ibj}      return current style
     */
    function getStyle(elem, prop) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(elem, null)[prop];
        }else{
            return elem.currentStyle[prop];
        }
    }

    /**
     * create elem
     * @param  {str} elemName   elem name
     * @param  {obj} appendElem append elem
     * @return {obj}            return create elem node
     */
    function createElem(elemName, appendElem) {
        if (!elemName) return;

        var elem = document.createElement(elemName); // 创建元素节点
        if (appendElem) {
            appendElem.appendChild(elem);
        }else{
            document.body.appendChild(elem);
        }

        return elem;
    }

     /**
      * set style
      * @param {obj} elem  elem
      * @param {obj} style style
      */
    function setStyle(elem, style = {}) {
        if (!elem) return;

        for (var val in style) {
            elem.style[val] = style[val];
        }
    }

    /**
     * get viewport offset
     * @return {obj} {w: width, h: height}
     */
    function getViewportOffset() {
        if (window.innerWidth) {
            return {
                w : window.innerWidth,
                h : window.innerHeight
            }
        }else{
            if (document.compatMode == "BackCompat") {
                return {
                    w : document.body.clientWidth,
                    h : document.body.clientHeight
                }
            }else{
                return {
                    w : document.documentElement.clientWidth,
                    h : document.documentElement.clientHeight
                }
            }
        }
    }

    // load css style
    (function () {
        if (!css_path) return console.log('css url not null');

        var link = document.createElement("link");
        link.setAttribute("rel", "stylesheet");
        link.setAttribute("type", "text/css");
        link.setAttribute("href", css_path);

        var heads = document.head || document.getElementsByTagName('head')[0];

        heads.appendChild(link);
    }());


    var Layer = function (options) {

        // client
        this.ifmob = /Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent);

        // main id
        var rand = Math.random().toString().split('.')[1];
        var mainid = 'layer_' + rand;
        this.mainid = mainid;

        // namefix
        this.namefix(this, options);

        // init
        this.init(this, options);
    };

    Layer.parent = Layer.prototype;

    // namefix
    Layer.parent.namefix = function (that = this, options = {}) {

        // icon
        if (options.icon === 1) {
            options.icon = 'success';
            options.icon_val = '&#xe71b;';
        } else if (options.icon === 2) {
            options.icon = 'error';
            options.icon_val = '&#xe609;';
        } else if (options.icon === 3) {
            options.icon = 'warning';
            options.icon_val = '&#xe620;';
        } else if (options.icon === 4) {
            options.icon = 'loading';
            options.icon_val = '&#xe715;';
        }

        // offset
        if (options.offset) {
            var offset = options.offset.toLowerCase();
            if (offset === 't') {
                offset = 'top';
            } else if (offset === 'r') {
                offset = 'right';
            } else if (offset === 'b') {
                offset = 'bottom';
            } else if (offset === 'l') {
                offset = 'left';
            } else if(offset === 'm') {
                offset = 'middle';
            }
            options.offset = offset;
        }
    }

    // init
    Layer.parent.init = function (that = this, options = {}) {

        // 1. build inner html
        var html = that.buildHtml(options);
        if (!html) return false;

        // 2. create elem, set id, append layer to body
        var layer_main = that.createLayerElem(that, html, options);

        // 3. set attr
        that.attr(layer_main, options);

        // 4. 添加动画效果
        that.anim(layer_main);

        // 5. follow up
        that.after(that, layer_main, options);
    };

    // 1. buildHtml
    Layer.parent.buildHtml = function (options = {}) {

        var html = '';

        if (options.model === 'msg') {
            html += '<div class="layer-content">';

            if (options.icon) {
                html += '<i class="layer-icon layer-icon-' + options.icon + '">' + options.icon_val + '</i>';
            }

            html += options.content;
            html += '</div>';
        }

        return html;
    };

    // 2. createLayerElem
    Layer.parent.createLayerElem = function(that, html, options = {}) {
        if (options.shade) {
            var layer_shade = createElem('div');
            layer_shade.classList.add('layer-shade');
            that.shade_elem = layer_shade;
        }

        var main_elem = createElem('div');
        main_elem.setAttribute('id', that.mainid);
        main_elem.classList.add('layer');
        main_elem.classList.add('layer-bg');
        main_elem.innerHTML = html;

        var layer_main = document.getElementById(that.mainid);
        return layer_main;
    };

    // 3. add classname, attr
    Layer.parent.attr = function (layer_main, options) {
        var setElemOffset = function (elem) {
            var elem_w = elem.offsetWidth,
                elem_h = elem.offsetHeight;

            var style = {
                'margin-left': (-parseInt(elem_w) / 2) + 'px',
            }
        }

        if (options.model === 'msg') {
            layer_main.classList.add('layer-msg');
            layer_main.classList.add('layer-msg-' + options.offset);

            setElemOffset(layer_main);
        }
    };

    // add anim
    Layer.parent.anim = function (layer_main) {
        setTimeout(function(){
            layer_main.classList.add('xon');
        }, 1);
    }

    // 5. after
    Layer.parent.after = function (that, layer_main = '', options = {}) {
        var close = function (layer_main) {
                if (!layer_main) return false;

                setTimeout(function(){
                    if (options.shade) {
                        that.shade_elem.remove();
                    }

                    layer_main.remove();

                    var callback = options.callBack;
                    if (typeof(callback) === "function") {
                        callback();
                    }
                }, 201);
            },
            autoClose = function (layer_main) {
                var time = options.time;
                if(time && time !== 0){
                    setTimeout(function(){
                        close(layer_main);
                    }, time * 1000);
                }
            };

        switch (options.model) {
            case 'msg':
                return autoClose(layer_main);
        }
    };

    // bing layer to window
    window.layer = {
        version: '1.0.0',

        // msg
        msg: function (content = '', options = {}, callBack = null) {
            options = {
                model:    'msg',
                content:  content        ? content        : 'please pass parameter 1',
                time:     options.time   ? options.time   : 1,
                icon:     options.icon   ? options.icon   : 1,
                offset:   options.offset ? options.offset : 'middle',
                shade:    options.shade  ? options.shade  : false,
                callBack: typeof(callBack) === "function" ? callBack : null,
            };
            return this.run(options);
        },

        // core method
        run: function (options) {
            return (new Layer(options)).minid;
        },
    };
}(window, 'css/layer.css'));
